<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../static/lib/layui-v2.9.8/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <h2 align="center">新增装备器材</h2>
    </div>
    <form id="forms">
        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label required">库房名字</label>
                <div class="layui-input-block">
                    <select name="fk_department" lay-search="" lay-verify="fk_department">
                        <option value="">选择库房名字</option>
                        {% for item in departments %}
                        <option value="{{ item.pk }}">{{ item.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">装备器材名字</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="装备器材名称不能为空"
                           placeholder="请输入装备器材名字" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">规格</label>
                <div class="layui-input-block">
                    <input type="text" name="specification" lay-reqtext="规格不能为空" placeholder="请输入规格" value=""
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label required">分类</label>
                <div class="layui-input-block">
                    <!--?                    <input type="text" name="classification" lay-reqtext="分类不能为空"-->
                    <!--?                           placeholder="请输入分类" value="" class="layui-input">-->
                        <select name="classification" lay-filter="aihao">
                            <option value=""></option>
                            <option value="0">宿营</option>
                            <option value="1">供电</option>
                            <option value="2">供水</option>
                            <option value="3">卫浴</option>
                            <option value="4">供暖制冷</option>
                        </select>
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">价格</label>
                <div class="layui-input-block">
                    <input type="number" name="price" lay-reqtext="价格不能为空" placeholder="请输入价格" value=""
                           class="layui-input" lay-precision="2" step='0.01' lay-affix="number" min="0">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">数量</label>
                <div class="layui-input-block">
                    <input type="number" name="quantity" lay-reqtext="数量不能为空" placeholder="请输入数量" value=""
                           class="layui-input" lay-precision="0" lay-affix="number" min="0">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label required">管理单位</label>
                <div class="layui-input-block">
                    <input type="text" name="manage_unit" lay-reqtext="管理单位不能为空"
                           placeholder="请输入管理单位" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">责任人</label>
                <div class="layui-input-block">
                    <input type="text" name="person" lay-reqtext="责任人不能为空"
                           placeholder="请输入责任人" value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label required">计量单位</label>
                <div class="layui-input-block">
                    <input type="text" name="unit" lay-reqtext="计量单位不能为空"
                           placeholder="请输入计量单位" value="" class="layui-input">
                </div>

            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">质量等级</label>
                <div class="layui-input-block">
                    <input type="text" name="quality_grade" lay-reqtext="质量等级不能为空"
                           placeholder="请输入质量等级" value="" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label required">使用期限</label>
                <div class="layui-input-block">
                    <input type="number" name="user_year" lay-reqtext="使用期限不能为空" placeholder="请输入使用期限"
                           value=""
                           class="layui-input" lay-precision="0" lay-affix="number" min="0">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label required">储存时间</label>
                <div class="layui-input-block">
                    <input type="number" name="stay_year" lay-reqtext="储存期限不能为空" placeholder="请输入储存期限"
                           value=""
                           class="layui-input" lay-precision="0" lay-affix="number" min="0">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">上传产品</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-bg-orange" id="ID-upload-demo-files">选择多文件
                    </button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <colgroup>
                                <col style="min-width: 100px;">
                                <col width="150">

                                <col width="260">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>操作</th>
                            </thead>
                            <tbody id="ID-upload-demo-files-list"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">备注</label>
            <div class="layui-input-block">
                <input type="text" name="other" lay-reqtext="备注不能为空"
                       placeholder="请输入备注" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>
<script src="../../../static/lib/layui-v2.9.8/layui.js" charset="utf-8"></script>


<script>
    layui.use(['form', 'upload'], function () {
        var form = layui.form,
                upload = layui.upload,
                layer = layui.layer,
                $ = layui.$;

        // ajax 头部增加csrf_token
        var token = "{{ csrf_token }}"
        $.ajaxSetup({
            headers: {
                'X-CSRFTOKEN': `${token}`,
                'AUTHORIZATION': 'Bearer ' + localStorage.token,
            }, // JWTAuthentication.authenticate()方法获取 header = request.META.get(api_settings.AUTH_HEADER_NAME),
        });

        $.ajaxSetup({
            complete: function (XMLHttpRequest, textStatus) {
                if (XMLHttpRequest.status === 401) {  // 401 表示未授权，即 token 无效
                    layer.msg('授权已过期，需重新登陆', {icon: 2, time: 2000}, function () {
                        window.location.href = '/login';
                    })
                }
            }
        });


        $(function () {   //页面加载时，AJAX请求
            $.ajax({
                url: '/auth-query',
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                },
                error: function () {
                    layer.msg('授权查询API出错！');
                }
            })
        });

        // 制作多文件上传表格
        var uploadListIns = upload.render({
            elem: '#ID-upload-demo-files',
            elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
            url: '', // 实际使用时改成您自己的上传接口即可。
            accept: 'file',
            multiple: true,
            number: 3,
            auto: false,
            bindAction: '#ID-upload-demo-files-action',
            choose: function (obj) {
                var that = this;
                var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                // 读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">',
                        '<td>' + file.name + '</td>',
                        '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
                        '<td>',
                        '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                        '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                        '</td>',
                        '</tr>'].join(''));

                    // 单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    // 删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; // 删除对应的文件
                        tr.remove(); // 删除表格行
                        // 清空 input file 值，以免删除后出现同名文件不可选
                        uploadListIns.config.elem.next()[0].value = '';
                    });

                    that.elemList.append(tr);
                });
            },
            done: function (res, index, upload) { // 成功的回调
                var that = this;
                // if(res.code == 0){ // 上传成功
                var tr = that.elemList.find('tr#upload-' + index)
                var tds = tr.children();
                tds.eq(3).html(''); // 清空操作
                delete this.files[index]; // 删除文件队列已经上传成功的文件
                return;
                //}
                this.error(index, upload);
            },
            allDone: function (obj) { // 多文件上传完毕后的状态回调
                console.log(obj)
            },
            error: function (index, upload) { // 错误回调
                var that = this;
                var tr = that.elemList.find('tr#upload-' + index);
                var tds = tr.children();
                // 显示重传
                tds.eq(3).find('.demo-reload').removeClass('layui-hide');
            },
            progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
                element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let forms = new FormData(document.getElementById("forms"));
            //传给后台
            $.ajax({
                url: "/product_manage_list/",
                type: 'POST',
                dataType: 'JSON',
                data: forms,
                cache: false,
                processData: false,
                contentType: false,
                success: function (result) {
                    if (result.success) {
                        parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                        parent.layui.table.reload('currentTableId');
                        parent.parent_msg(result.msg)
                    } else {
                        layer.alert(result.msg);
                    }
                },
                error: function (result) {
                    alert("接口错误！！！");
                }
            });

            return false;
        });
    })
    ;
</script>
</body>
</html>